<template>
  <div class="app-container">
    <el-card class="cardCont">
      <el-form :model="form">
        <el-row>
          <!-- 邮箱号 -->
          <el-col :span="24">
            <el-form-item :label="$t('smsAppConfig.email')" prop="email">
              <el-input
                v-model="form.email"
                :placeholder="$t('smsAppConfig.emailRead')"
                maxlength="50"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 主题 -->
          <el-col :span="24">
            <el-form-item :label="$t('smsAppConfig.subject')" prop="subject">
              <el-input
                v-model="form.subject"
                :placeholder="$t('smsAppConfig.subjectRead')"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 正文 -->
          <el-col :span="24">
            <el-form-item :label="$t('smsAppConfig.htmlBody')" prop="subject">
              <jmash-editor
                v-if="showEditor"
                v-model="form.htmlBody"
                style="width: 100%"
              />
              <el-input
                v-else
                class="input-center"
                v-model="form.textBody"
                type="textarea"
                :placeholder="$t('smsAppConfig.textBodyRead')"
                :autosize="{ minRows: 10 }"
              />
            </el-form-item>
          </el-col>
          <!-- 格式 -->
          <div class="format">
            <span class="el-button-color dropdown-left" @click="toggleEditor">{{
              $t("smsAppConfig.format")
            }}</span>
          </div>
          <template class="footer">
            <!-- 发送按钮 -->
            <el-button type="primary" @click="handleSend">
              {{ $t("smsTemplate.sending") }}
            </el-button>
            <!-- 返回按钮 -->
            <el-button
              type="primary"
              @click="routerBack"
              style="margin-left: 10px"
            >
              {{ $t("common.back") }}
            </el-button>
          </template>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { routerUtil } from "jmash-core";
import { smsAppConfigApi } from "@/api/sms/sms-app-config";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
// 添加一个布尔值来控制显示哪个组件
const showEditor = ref(true);
// 发送表单
const form = ref({
  subject: "",
  htmlBody: "",
  textBody: "",
  email: "",
  configCode: route.query.configCode as string,
});

// 切换显示 Editor 和 el-input 的方法
function toggleEditor() {
  showEditor.value = !showEditor.value;
  if (!showEditor.value) {
    form.value.htmlBody = ""; // 清空 HTML 内容
  } else {
    form.value.textBody = ""; // 清空文本内容
  }
}
//发送
function handleSend() {
  smsAppConfigApi.sendEmail(form.value).then(({ status }) => {
    if (status === 200) {
      ElMessage({
        message: t("发送成功"),
        type: "success",
      });
      routerUtil.closeTagView(route.fullPath, router, false);
    } else {
      ElMessage({
        message: t("发送失败"),
        type: "error",
      });
    }
  });
}
// 返回上一页
function routerBack() {
  routerUtil.closeTagView(route.fullPath, router, false);
}
</script>
<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.format {
  position: absolute;
  left: -13px;
  top: 32%;
  font-size: 14px;
}
</style>
